<template>
	<view class="container">
		<view class="imgbox">
			<img class="avatar" :src="personData.avatar" alt="" />

			
				<navigator class="chooseimg" :url="`/pages/personal_information/edit_avator?avatar=${personData.avatar}&name=${personData.nickname}`">
					<up-icon name="camera" color="#fff" size="20"></up-icon>
				</navigator>

			
		</view>
		<up-divider></up-divider>
		<up-cell-group :border="false">
		    <up-cell
		        title="昵称"
				:url="`/pages/personal_information/edit_name_phone?type=1&name=${personData.nickname}&phone=${personData.phone}&avatar=${personData.avatar}`"
		    	isLink
		    >
				<template #value>
					<up-input
					    placeholder="请输入内容"
					    :border="false"
					    v-model="personData.nickname"
					    @change="achange"
						inputAlign="right"
						disabled
						disabledColor="#fff"
					  ></up-input>
				</template>
		    </up-cell>
			<up-cell
			    title="手机号码"
				isLink
				:url="`/pages/personal_information/edit_name_phone?type=2&name=${personData.nickname}&phone=${personData.phone}&avatar=${personData.avatar}`"
			>
				<template #value>
					<up-input
					    placeholder="请输入内容"
					    :border="false"
					    v-model="personData.phone"
					    @change="achangesure"
						
						inputAlign="right"
						disabled
						disabledColor="#fff"
						@click="go(2)"
					  ></up-input>
				</template>
			</up-cell>
		</up-cell-group>
		<!-- <view class="btn" @click="savePerson">
			提交
		</view> -->
		<view class="loginOut" @click="show = true">
			<img src="@/static/loginOut.png" alt="" class="img" /> 退出登录
		</view>
	</view>
	<up-modal :show="show"	content="确定退出当前账号吗？" showCancelButton @confirm="show = false" @cancel="show = false" ref="uModal" :asyncClose="true"></up-modal>
</template>

<script>
	import {
		http
	} from 'uview-plus'
	export default {
		data() {
			return {
				personData:{},
				show:false
			}
		},
		async onShow(){
				await http.post('/shop/user/read').then(res => {
					console.log(res)
					this.personData = res
				})
		},
		methods: {
			achange(value){
				console.log(value)
				this.nickName = value
			},
			achangesure(value){
				this.phone = value
			},
			savePerson(){
				console.log(this.nickName)
				console.log(this.phone)
			},
			go(types){
				console.log(`/pages/personal_information/edit_name_phone?type=${types}&name=${this.personData.nickName}&phone=${this.personData.phone}&avatar=${this.personData.avatar}`)
				// uni.navigateTo({
				// 	url:`/pages/personal_information/edit_name_phone?type=${types}&name=${this.personData.nickName}&phone=${this.personData.phone}&avatar=${this.personData.avatar}`
				// })
			}
		}
	}
</script>

<style lang="scss">
	.container {
		width: 100%;
		padding: 0 16rpx;
		box-sizing: border-box;
	}

	.imgbox {
		width: 240rpx;
		height: 240rpx;
		margin: 30rpx auto;
		position: relative;

		.avata r {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}

		.chooseimg {
			width: 80rpx;
			height: 80rpx;
			border-radius: 128rpx;
			opacity: 1;
			position: absolute;
			background: #FBC441;
			right: 8rpx;
			bottom: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			text-align: center;
		}
	}
		.btn{
			position: fixed;
			left: 30rpx;
			right: 30rpx;
			bottom: 106rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 678rpx;
			height: 104rpx;
			border-radius: 92rpx;
			margin: 60rpx auto;
			font-size: $font-lg;
			color: #fff;
			background: #08AFFE;
		}
		.loginOut{
			position: fixed;
			left: 30rpx;
			right: 30rpx;
			bottom: 26rpx;
			height: 88rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
			color:#3d3d3d;
			.img{
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}
		}
	
</style>